<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>CoolBlue</title>

<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<meta name="author" content="Erwin Aligam - styleshout.com" />
<meta name="description" content="Site Description Here" />
<meta name="keywords" content="keywords, here" />
<meta name="robots" content="index, follow, noarchive" />
<meta name="googlebot" content="noarchive" />

<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />

</head>

<body>

<!--header -->
<div id="header-wrap"><div id="header">

	<a name="top"></a>

	<h1 id="logo-text"><a href="index.html" title="">coolblue</a></h1>
	<p id="slogan">Just Another Styleshout CSS Template... </p>

	<div  id="nav">
		<ul>
			<li><a href="index.html">Home</a></li>
			<li><a href="style.html">Style Demo</a></li>
			<li id="current"><a href="blog.html">Blog</a></li>
			<li><a href="archives.html">Archives</a></li>
			<li><a href="index.html">Support</a></li>
			<li><a href="index.html">About</a></li>
		</ul>
	</div>

   <p id="rss">
   	<a href="index.html">Grab the RSS feed</a>
   </p>

   <form id="quick-search" method="get" action="index.html">
   	<fieldset class="search">
      	<label for="qsearch">Search:</label>
         <input class="tbox" id="qsearch" type="text" name="qsearch" value="Search..." title="Start typing and hit ENTER" />
         <button class="btn" title="Submit Search">Search</button>
      </fieldset>
   </form>

<!--/header-->
</div></div>
	
<!-- content-outer -->
<div id="content-wrap" class="clear" >

	<!-- content -->
   <div id="content">

   	<!-- main -->
	   <div id="main">

      	<div class="post">

         	<div class="right">

            	<h2><a href="index.html">A Blog Post</a></h2>

               <p class="post-info">Filed under <a href="index.html">templates</a>, <a href="index.html">internet</a></p>

               <div class="image-section">
              		<img src="images/img-post.jpg" alt="image post" height="200" width="500"/>
         	   </div>

				   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum.
					Cras id urna. Morbi tincidunt, orci ac <a href="index.html">convallis aliquam</a>, lectus turpis varius lorem, eu
				   posuere nunc justo tempus leo.</p>

				   <p>
				   Donec mattis, purus nec placerat bibendum, <a href="index.html">dui pede condimentum</a>
				   odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra
				   condimentum, lorem tellus eleifend magna, <a href="index.html">eget fringilla velit</a> magna id neque. Curabitur vel urna.
				   In tristique orci porttitor ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum.
				   Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu
				   posuere nunc justo tempus leo.</p>

               <div class="share-box clear" >

						<h4>Share This</h4>

                  <ul>
                  	<li><a title="RSS" href="index.html" rel="nofollow">
								<img alt="RSS" title="RSS" src="images/rss_32.png" /></a>
							</li>
							<li><a title="del.icio.us" href="index.html" rel="nofollow">
								<img alt="del.icio.us" title="del.icio.us" src="images/delicious_32.png" /></a>
							</li>
                     <li><a title="StumbleUpon" href="index.html" rel="nofollow">
								<img alt="StumbleUpon" title="StumbleUpon" src="images/stumbleupon_32.png" /></a>
							</li>
							<li><a title="Digg" href="index.html" rel="nofollow">
								<img alt="Digg" title="Digg" src="images/digg_32.png" /></a>
							</li>
                     <li><a title="Facebook" href="index.html" rel="nofollow">
								<img alt="Facebook" title="Facebook" src="images/facebook_32.png" /></a>
							</li>
							<li><a title="Twitter" href="index.html" rel="nofollow">
								<img alt="Twitter" title="Twitter" src="images/twitter_32.png" /></a>
							</li>
                     <li><a title="Technorati" href="index.html" rel="nofollow">
								<img alt="Technorati" title="Technorati" src="images/technorati_32.png" /></a>
							</li>
							<li><a title="NewsVine" href="index.html" rel="nofollow">
								<img alt="NewsVine" title="NewsVine" src="images/newsvine_32.png" /></a>
							</li>
                     <li><a title="LinkedIn" href="index.html" rel="nofollow">
								<img alt="LinkedIn" title="LinkedIn" src="images/linkedin_32.png" /></a>
							</li>
							<li><a title="E-mail this story to a friend!" href="index.html" rel="nofollow">
								<img alt="E-mail this story to a friend!" title="E-mail this story to a friend!" src="images/email_32.png" /></a>
							</li>
                  </ul>

					</div>

            </div>

            <div class="left">

            	<p class="dateinfo">JAN<span>31</span></p>

               <div class="post-meta">
               	<h4>Post Info</h4>
                  <ul>
                  	<li class="user"><a href="#">Erwin</a></li>
                     <li class="time"><a href="#">12:30 PM</a></li>
                     <li class="comment"><a href="#">10 Comments</a></li>
                     <li class="permalink"><a href="#">Permalink</a></li>
                  </ul>
					</div>

               <div class="post-meta">
               	<h4>tags</h4>
						<ul class="tags">
			         	<li><a href="index.html" rel="tag">Clean</a></li>
			            <li><a href="index.html" rel="tag">Blog</a></li>
			            <li><a href="index.html" rel="tag">Minimal</a></li>
			         </ul>
               </div>

            </div>

			</div>

         <div class="post-bottom-section">

				<h4>3 comments</h4>

            <div class="right">

            	<ol class="commentlist">

						<li class="depth-1">

							<div class="comment-info">
								<img alt="" src="images/gravatar.jpg" class="avatar" height="40" width="40" />
								<cite>
									<a href="index.html">Erwin</a> Says: <br />
									<span class="comment-data"><a href="#comment-63" title="">January 31st, 2010 at 10:00 pm</a></span>
								</cite>
							</div>

							<div class="comment-text">
								<p>Comments are great!</p>

								<div class="reply">
									<a rel="nofollow" class="comment-reply-link" href="index.html">Reply</a>
		 						</div>
							</div>

							<ul class="children">

								<li class="depth-2">

									<div class="comment-info">
										<img alt="" src="images/gravatar.jpg" class="avatar" height="40" width="40" />
										<cite>
											<a href="index.html">Erwin</a> Says: <br />
											<span class="comment-data"><a href="#" title="">January 31st, 2010 at 8:15 pm</a></span>
										</cite>
									</div>

									<div class="comment-text">
										<p>And here is a threaded comment.</p>
										<div class="reply">
											<a rel="nofollow" class="comment-reply-link" href="index.html">Reply</a>
		 								</div>
									</div>

								</li>

								<li class="depth-2">

									<div class="comment-info">
										<img alt="" src="images/gravatar.jpg" class="avatar" height="40" width="40" />
										<cite>
											<a href="index.html">Erwin</a> Says: <br />
											<span class="comment-data"><a href="#" title="">January 31st, 2010 at 8:15 pm</a></span>
										</cite>
									</div>

									<div class="comment-text">
										<p>And here is another threaded comment.</p>

										<div class="reply">
											<a rel="nofollow" class="comment-reply-link" href="index.html">Reply</a>
		 								</div>
									</div>

									<ul class="children">

										<li class="depth-3">

											<div class="comment-info">
												<img alt="" src="images/gravatar.jpg" class="avatar" height="40" width="40" />
												<cite>
													<a href="index.html">Erwin</a> Says: <br />
													<span class="comment-data"><a href="#" title="">January 31st, 2010 at 8:10 pm</a></span>
												</cite>
											</div>

											<div class="comment-text">
												<p>Threaded comments are cool!</p>

												<div class="reply">
													<a rel="nofollow" class="comment-reply-link" href="index.html">Reply</a>
		 										</div>
											</div>

										</li>

									</ul>

								</li>

							</ul>

						</li>

						<li class="thread-alt depth-1">

							<div class="comment-info">
								<img alt="" src="images/gravatar.jpg" class="avatar" height="40" width="40" />
								<cite>
									<a href="index.html">Erwin</a> Says: <br />
									<span class="comment-data"><a href="#comment-63" title="">January 31st, 2010 at 8:00 pm</a></span>
								</cite>
							</div>

							<div class="comment-text">
								<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero.
								Suspendisse bibendum.</p>

								<div class="reply">
									<a rel="nofollow" class="comment-reply-link" href="index.html">Reply</a>
		 						</div>
							</div>

							<ul class="children">

								<li class="depth-2">

									<div class="comment-info">
										<img alt="" src="images/gravatar.jpg" class="avatar" height="40" width="40" />
										<cite>
											<a href="index.html">Erwin</a> Says: <br />
											<span class="comment-data"><a href="#" title="">January 31st, 2010 7:35 pm</a></span>
										</cite>
									</div>

									<div class="comment-text">
										<p>Donec libero. Suspendisse bibendum.</p>

										<div class="reply">
											<a rel="nofollow" class="comment-reply-link" href="index.html">Reply</a>
		 								</div>
									</div>

                           <ul class="children">

										<li class="depth-3">

											<div class="comment-info">
												<img alt="" src="images/gravatar.jpg" class="avatar" height="40" width="40" />
												<cite>
													<a href="index.html">Erwin</a> Says: <br />
													<span class="comment-data"><a href="#" title="">January 31st, 2010 at 7:20 pm</a></span>
												</cite>
											</div>

											<div class="comment-text">
												<p>Threaded comments are cool!</p>

												<div class="reply">
													<a rel="nofollow" class="comment-reply-link" href="index.html">Reply</a>
		 										</div>
											</div>

										</li>

									</ul>



								</li>

							</ul>

						</li>

						<li class="depth-1">

							<div class="comment-info">
								<img alt="" src="images/gravatar.jpg" class="avatar" height="40" width="40" />
								<cite>
									<a href="index.html">Erwin</a> Says: <br />
									<span class="comment-data"><a href="#comment-63" title="">January 31st, 2010  at 6:08 pm</a></span>
								</cite>
							</div>

							<div class="comment-text">
								<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum.
								Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu
								posuere nunc justo tempus leo.</p>

								<div class="reply">
									<a rel="nofollow" class="comment-reply-link" href="index.html">Reply</a>
		 						</div>

							</div>

							<ul class="children">

								<li class="depth-2">

									<div class="comment-info">
										<img alt="" src="images/gravatar.jpg" class="avatar" height="40" width="40" />
										<cite>
											<a href="index.html">Erwin</a> Says: <br />
											<span class="comment-data"><a href="#comment-63" title="">January 31st, 2010 at 6:08 pm</a> </span>
										</cite>
									</div>

									<div class="comment-text">
										<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

										<div class="reply">
											<a rel="nofollow" class="comment-reply-link" href="index.html">Reply</a>
		 								</div>
									</div>

								</li>

							</ul>

						</li>

					</ol>

            </div>

         </div>

         <div class="post-bottom-section">

				<h4>Leave a Reply</h4>

            <div class="right">

            	<form action="index.html" method="post" id="commentform">

               	<p>
					 		<label for="name">Name (required)</label><br />
							<input id="name" name="name" value="Your Name" type="text" tabindex="1" />
						</p>
                  <p>
						 	<label for="email">Email Address (required)</label><br />
							<input id="email" name="email" value="Your Email" type="text" tabindex="2" />
						</p>
                  <p>
							<label for="website">Website</label><br />
							<input id="website" name="website" value="Your Website" type="text" tabindex="3" />
						</p>
                  <p>
							<label for="message">Your Message</label><br />
							<textarea id="message" name="message" rows="10" cols="20" tabindex="4"></textarea>
						</p>
                  <p class="no-border">
							<input class="button" type="submit" value="Submit Comment" tabindex="5" />
						</p>

               </form>

            </div>

         </div>

      <!-- /main -->
		</div>

      <!-- sidebar -->
		<div id="sidebar">

      	<div class="about-me">

         	<h3>About Me</h3>
		      <p>
		      <a href="index.html"><img src="images/gravatar.jpg" width="40" height="40" alt="firefox" class="float-left" /></a>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum.
			   Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu
			   posuere nunc justo tempus leo <a href="index.html">Learn more...</a>
				</p>

         </div>

			<div class="sidemenu">

				<h3>Sidebar Menu</h3>
            <ul>
					<li><a href="index.html">Home</a></li>
					<li><a href="index.html#TemplateInfo">TemplateInfo</a></li>
					<li><a href="style.html">Style Demo</a></li>
					<li><a href="blog.html">Blog</a></li>
					<li><a href="archives.html">Archives</a></li>
					<li><a href="#" title="Web Templates">Web Templates</a></li>
				</ul>

			</div>

			<div class="sidemenu">

				<h3>Sponsors</h3>
            <ul>
					<li><a href="#" title="Website Templates">DreamTemplate <br />
	            	<span>Over 6,000+ Premium Web Templates</span></a>
	            </li>
					<li><a href="#" title="WordPress Themes">ThemeLayouts <br />
	            	<span>Premium WordPress &amp; Joomla Themes</span></a>
	            </li>
					<li><a href="#" title="Website Hosting">ImHosted.com <br />
	            	<span>Affordable Web Hosting Provider</span></a>
	            </li>
					<li><a href="#" title="Stock Photos">DreamStock <br />
	            	<span>Download Amazing Stock Photos</span></a>
	            </li>
					<li><a href="#" title="Website Builder">Evrsoft <br />
	            	<span>Website Builder Software &amp; Tools</span></a>
	            </li>
					<li><a href="#" title="Web Hosting">Web Hosting <br />
	            	<span>Top 10 Hosting Reviews</span></a>
	            </li>
				</ul>

			</div>

         <div class="popular">

				<h3>Most Popular</h3>
				<ul>
			   	<li><a href="index.html">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a>
						<br /><span>Posted on December 22, 2010</span>
					</li>
               <li><a href="index.html">Cras fringilla magna. Phasellus suscipit.</a>
						<br /><span>Posted on December 20, 2010</span>
					</li>
               <li><a href="index.html">Morbi tincidunt, orci ac convallis aliquam.</a>
						<br /><span>Posted on December 15, 2010</span>
					</li>
               <li><a href="index.html">Ipsum dolor sit amet, consectetuer adipiscing elit.</a>
						<br /><span>Posted on December 14, 2010</span>
					</li>
               <li><a href="index.html">Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem</a>
						<br /><span>Posted on December 12, 2010</span>
					</li>
				</ul>

			</div>

      <!-- /sidebar -->
		</div>

    <!-- content -->
	</div>
<!-- /content-out -->
</div>

<!-- footer-outer -->
<div id="footer-outer" class="clear"><div id="footer-wrap">

	<div id="gallery" class="clear">

		<h3>Flickr Photos </h3>

		<p class="thumbs">
			<a href="index.html"><img src="images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
			<a href="index.html"><img src="images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
			<a href="index.html"><img src="images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
			<a href="index.html"><img src="images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
			<a href="index.html"><img src="images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
			<a href="index.html"><img src="images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
			<a href="index.html"><img src="images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
			<a href="index.html"><img src="images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
         <a href="index.html"><img src="images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
			<a href="index.html"><img src="images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
      </p>

   </div>
	
	<div class="col-a">

		<h3>Contact Info</h3>

		<p>
		<strong>Phone: </strong>+1234567<br/>
		<strong>Fax: </strong>+123456789
		</p>

		<p><strong>Address: </strong>123 Put Your Address Here</p>
        <p><strong>E-mail: </strong>me@coolblue.com</p>
		<p>Want more info - go to our <a href="#">contact page</a></p>

      <h3>Updates</h3>

      <ul class="subscribe-stuff">
      	<li><a title="RSS" href="index.html" rel="nofollow">
				<img alt="RSS" title="RSS" src="images/social_rss.png" /></a>
			</li>
      	<li><a title="Facebook" href="index.html" rel="nofollow">
				<img alt="Facebook" title="Facebook" src="images/social_facebook.png" /></a>
			</li>
			<li><a title="Twitter" href="index.html" rel="nofollow">
				<img alt="Twitter" title="Twitter" src="images/social_twitter.png" /></a>
			</li>
			<li><a title="E-mail this story to a friend!" href="index.html" rel="nofollow">
				<img alt="E-mail this story to a friend!" title="E-mail this story to a friend!" src="images/social_email.png" /></a>
			</li>
      </ul>

      <p>Stay up to date. Subscribe via
		<a href="index">RSS</a>, <a href="index">Facebook</a>,
		<a href="index">Twitter</a> or <a href="index">Email</a>
		</p>

	</div>
		
	<div class="col-a">

   	<h3>Site Links</h3>

		<div class="footer-list">
			<ul>
				<li><a href="index.html">Home</a></li>
				<li><a href="index.html">Style Demo</a></li>
				<li><a href="index.html">Blog</a></li>
				<li><a href="index.html">Archive</a></li>
				<li><a href="index.html">About</a></li>
				<li><a href="index.html">Template Info</a></li>
				<li><a href="index.html">Site Map</a></li>
			</ul>
		</div>

      <h3>Friends</h3>

		<div class="footer-list">
			<ul>
				<li><a href="index.html">consequat molestie</a></li>
				<li><a href="index.html">sem justo</a></li>
				<li><a href="index.html">semper</a></li>
				<li><a href="index.html">magna sed purus</a></li>
				<li><a href="index.html">tincidunt</a></li>
				<li><a href="index.html">consequat molestie</a></li>
				<li><a href="index.html">magna sed purus</a></li>
			</ul>
		</div>

	</div>

   <div class="col-a">

      <h3>Credits</h3>

      <div class="footer-list">
			<ul>
				<li><a href="http://jasonlarose.com/blog/110-free-classy-social-media-icons">
						110 Free Classy Social Media Icons by Jason LaRose
				    </a>
				</li>
            <li><a href="http://wefunction.com/2009/05/free-social-icons-app-icons/">
						Free Social Media Icons by WeFunction
				    </a>
				</li>
            <li><a href="http://www.famfamfam.com/lab/icons/">
						Free Icons by FAMFAMFAM
				    </a>
				</li>
			</ul>
		</div>

      <h3>Recent Comments</h3>

	   <div class="recent-comments">
         <ul>
			<li><a href="index.html" title="Comment on title">Whoa! This one is really cool...</a><br /> &#45; <cite>Erwin</cite></li>
			<li><a href="index.html" title="Comment on title">Wow. This theme is really awesome...</a><br /> &#45; <cite>John Doe</cite></li>
			<li><a href="index.html" title="Comment on title">Type your comment here...</a><br />&#45; <cite>Naruto</cite></li>
			<li><a href="index.html" title="Comment on title">And don't forget this theme is free...</a><br /> &#45; <cite>Shikamaru</cite></li>
         <li><a href="index.html" title="Comment on title">Just a simple reply test. Thanks...</a><br /> &#45; <cite>ABCD</cite></li>
			</ul>
		</div>

   </div>

   <div class="col-b">

      <h3>Archives</h3>

	   <div class="footer-list">
			<ul>
				<li><a href="index.html">January 2010</a></li>
				<li><a href="index.html">December 2009</a></li>
				<li><a href="index.html">November 2009</a></li>
				<li><a href="index.html">October 2009</a></li>
				<li><a href="index.html">September 2009</a></li>
			</ul>
		</div>

      <h3>Recent Bookmarks</h3>

	   <div class="footer-list">
			<ul>
				<li><a href="index.html">5 Must Have Sans Serif Fonts for Web Designers</a></li>
				<li><a href="index.html">The Basics of CSS3</a></li>
				<li><a href="index.html">10 Simple Tips for Launching a Website</a></li>
				<li><a href="index.html">24 ways: Working With RGBA Colour</a></li>
				<li><a href="index.html">30 Blog Designs with Killer Typography</a></li>
				<li><a href="index.html">The Principles of Great Design</a></li>
			</ul>
		</div>

	</div>

<!-- /footer-outer -->
</div></div>

<!-- footer-bottom -->
<div id="footer-bottom">

    <p class="bottom-left">
		&copy; 2010 <strong>Copyright Info</strong>&nbsp; &nbsp; &nbsp;
		<a href="http://www.cssmoban.com/" title="Website Templates">website templates</a> from <a href="http://www.cssmoban.com/">网站模板</a>
	 </p>

	 <p class="bottom-right">
		<a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> |
	   <a href="http://validator.w3.org/check/referer">XHTML</a>	|
		<a href="index.html">Home</a> |
		<a href="index.html">Sitemap</a> |
		<a href="index.html">RSS Feed</a> |
      <strong><a href="#top">Back to Top</a></strong>
    </p>

<!-- /footer-bottom-->
</div>

</body>
</html>
